import React, { Component } from "react";
import { connect } from "dva";
import { Form, Input, Button, DatePicker, Table } from "antd";
import moment from "moment";
import store from "store";

import GetPlanBook from "../../Enterprise/Organization/getPlanBook";

import { enterpriseInsComInsGetInsBootPage } from "../../../services/api";
import "./InsuranceMangerment.less";
import "./insurancePlan.less";

const { RangePicker } = DatePicker;

const dateFormat = "YYYY-MM-DD";

@connect(state => ({
  global: state.global
}))
@Form.create()

/**
 * 企业保险列表页
 */
export default class InsuranceBasic extends Component {
  constructor(props, context) {
    super(props, context);
    console.log(props, context, "props,context");
    let { regProvince } = this.props.global.companyInfo;
    if (regProvince !== "450000" && regProvince !== "610000") {
      regProvince = "100000";
    }

    this.state = {
      keyword: "", //输入框的的值
      startTime: "", //开始时间
      endTime: "", //结束时间
      dataSource: [],
      regProvince,
      accessbookvisible: false,
      pagenav: {
        pageNumber: 1,
        pageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `总共 ${total} 条`,
        onShowSizeChange: (pageNumber, pageSize) => {
          const pagenav = Object.assign({}, this.state.pagenav);
          pagenav.pageNumber = pageNumber;
          pagenav.pageSize = pageSize;
          this.setState({ pagenav });
          setTimeout(() => {
            this.taskComShiftPage();
          });
        },
        onChange: (page, pageSize) => {
          const pagenav = Object.assign({}, this.state.pagenav);
          pagenav.pageNumber = page;
          pagenav.pageSize = pageSize;
          this.setState({ pagenav });
          setTimeout(() => {
            this.enterpriseInsComInsGetInsBootPage();
          });
        },
        total: 0
      }
    };
  }

  componentDidMount() {
    this.enterpriseInsComInsGetInsBootPage();
  }

  resetQueryCond = () => {
    this.setState(
      {
        keyword: "", //输入框的的值
        startTime: "", //开始时间
        endTime: "" //结束时间
      },
      () => {
        this.enterpriseInsComInsGetInsBootPage();
      }
    );
  };

  //时间选择
  onChangeTime = (date, dateString) => {
    // console.log('获得的日期>>>>>>>>>>>>>',dateString);
    this.setState({ startTime: dateString[0], endTime: dateString[1] });
  };

  //输入框的模糊查询关键字
  inputTracknameChange = e => {
    // console.log('获得的模糊查询>>>>>>>>>>>>>',e.target.value.trim());
    this.setState({ keyword: e.target.value.trim() });
  };

  /* 方案书分页查询 */
  enterpriseInsComInsGetInsBootPage = () => {
    const { pageSize, pageNumber } = this.state.pagenav;
    const { keyword, startTime, endTime } = this.state;
    enterpriseInsComInsGetInsBootPage({
      pageSize,
      pageNumber,
      keyword,
      startTime,
      endTime
    })
      .then(res => {
        console.log(res, "方案书分页查询-res");
        const pagenav = { ...this.state.pagenav };
        pagenav.total = res.data.total;
        const dataSource = res.data.data.map(val => {
          const obj = { ...val };
          obj.key = val.comInsBootSchemeId;
          return obj;
        });
        this.setState({ dataSource, pagenav });
      })
      .catch(err => console.log(err));
  };

  //表格渲染
  renderOrderList = () => {
    const columns = [
      {
        title: "保险方案书名称",
        dataIndex: "insBootName",
        key: "insBootName"
      },
      {
        title: "投保人",
        dataIndex: "comName",
        key: "comNames"
      },
      {
        title: "企业人数",
        dataIndex: "comPerNum",
        key: "comPerNum"
      },
      {
        title: "联系人",
        dataIndex: "contactper",
        key: "contactper"
      },
      {
        title: "联系方式",
        dataIndex: "contactPhone",
        key: "contactPhone"
      },
      {
        title: "申请时间",
        dataIndex: "createTime",
        key: "createTime"
      },
      {
        title: "操作",
        render: (text, record) => {
          const { regProvince } = this.state;
          const { proCode, comPerNum } = record;
          return (
            <div
              onClick={() => {
                const a = regProvince + proCode;
                store.set("bookNum", { proCode, comPerNum });
                this.props.history.push("/InsuranceManagement/100000TYX-PA-1");
              }}
              style={{ color: "#0f71ff" }}
            >
              查看
            </div>
          );
        }
      }
    ];

    return (
      <Table
        pagination={this.state.pagenav}
        dataSource={this.state.dataSource}
        columns={columns}
      />
    );
  };

  render() {
    return (
      <div className="insurancePlan">
        <div className="Insurance">
          <div className="form">
            <label>
              关键字：
              <Input
                style={{ width: 214 }}
                placeholder="请输入保险名称/保险公司名称"
                onChange={this.inputTracknameChange}
                value={this.state.keyword}
                maxLength="20"
              />
            </label>

            <label style={{ marginLeft: 16 }}>
              申请日期：
              <RangePicker
                format={dateFormat}
                onChange={this.onChangeTime}
                value={[
                  this.state.startTime === ""
                    ? null
                    : moment(this.state.startTime, dateFormat),
                  this.state.endTime === ""
                    ? null
                    : moment(this.state.endTime, dateFormat)
                ]}
              />
            </label>
            <Button
              onClick={() => {
                this.enterpriseInsComInsGetInsBootPage();
              }}
              style={{ marginLeft: 16 }}
              type="primary"
            >
              搜索
            </Button>
            <Button style={{ marginLeft: 16 }} onClick={this.resetQueryCond}>
              重置
            </Button>
          </div>
          <div className="btnbox" style={{ marginTop: "16px" }}>
            <Button
              type="primary"
              onClick={() => {
                this.setState({ accessbookvisible: true });
              }}
            >
              获取保险方案
            </Button>
          </div>
          {this.renderOrderList()}
        </div>
        <GetPlanBook
          okorcancel={(field, value) => {
            this.setState({ [field]: value });
          }}
          accessbookvisible={this.state.accessbookvisible}
        />
      </div>
    );
  }
}
